<template>
    <div class="body">
        <div class="chose">
            <div class="top">
                <div class="word">开始时间 :</div>
                <div class="select">
                    <el-date-picker
                        v-model="value"
                        type="date"
                        size="mini"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                    >
                    </el-date-picker>
                </div>
                <div class="word">截至时间 :</div>
                <div class="select">
                    <el-date-picker
                        v-model="value2"
                        type="date"
                        size="mini"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :clearable="false"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>
                <div class="button" style="margin-left: 20px" @click="timeData">
                    搜索
                </div>
                <div
                    class="button"
                    style="background-color: #ffffff; color: #000000"
                    @click="reLoad"
                >
                    重置
                </div>
            </div>
        </div>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="chart">
                    <div class="title">人员巡更次数统计</div>
                    <div class="chart-container" id="chart-container"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="chart">
                    <div class="title">点位巡更次数统计</div>
                    <div class="chart-container" id="chart-container2"></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="chart">
                    <div class="title">人员漏检排行</div>
                    <el-row style="margin-top: 40px">
                        <el-col :span="5"
                            ><div class="title-list">排行</div></el-col
                        >
                        <el-col :span="14"
                            ><div class="title-list">巡更人员</div></el-col
                        >
                        <el-col :span="5"
                            ><div class="title-list">漏检</div></el-col
                        >
                    </el-row>
                    <div class="list">
                        <div v-for="(item, index) in list2" :key="index">
                            <el-row style="margin-bottom: 60px">
                                <el-col :span="5">
                                    <div class="ranking" v-if="index + 1 === 1">
                                        {{ index + 1 }}
                                    </div>
                                    <div
                                        class="ranking"
                                        v-else-if="index + 1 === 2"
                                        style="background-color: #f5b01c"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                    <div
                                        class="ranking"
                                        v-else
                                        style="background-color: #5087ec"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                </el-col>
                                <el-col :span="14">
                                    <div class="title-list">
                                        {{ item.name }}
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="title-list">
                                        {{ item.work }}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="chart">
                    <div class="title">点位漏检排行</div>
                    <el-row style="margin-top: 30px">
                        <el-col :span="5"
                            ><div class="title-list">排行</div></el-col
                        >
                        <el-col :span="14"
                            ><div class="title-list">巡更人员</div></el-col
                        >
                        <el-col :span="5"
                            ><div class="title-list">漏检</div></el-col
                        >
                    </el-row>
                    <div class="list">
                        <div v-for="(item, index) in list" :key="index">
                            <el-row style="margin-bottom: 40px">
                                <el-col :span="5">
                                    <div class="ranking" v-if="index + 1 === 1">
                                        {{ index + 1 }}
                                    </div>
                                    <div
                                        class="ranking"
                                        v-else-if="index + 1 === 2"
                                        style="background-color: #f5b01c"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                    <div
                                        class="ranking"
                                        v-else
                                        style="background-color: #5087ec"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                </el-col>
                                <el-col :span="14">
                                    <div class="title-list">
                                        {{ item.name }}
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="title-list">
                                        {{ item.work }}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    patrolChart,
    missCheckRanking,
    selectPatrolCount,
} from "@/api/sendhttp/son";
export default {
    data() {
        return {
            value: this.dayjs().subtract(7, "day").format("YYYY-MM-DD"),
            value2: this.dayjs().format("YYYY-MM-DD"),
            list: [],
            list2: [],
            pickerOptions: {
                // onPick: ({ maxDate, minDate }) => {
                //   console.log("maxDate", maxDate, "minDate", minDate);
                //   this.value = minDate.getTime();
                //   if (maxDate) {
                //     // 第二次点击日期选择器，选好初始时间和结束时间后，解除禁用限制
                //     this.value = "";
                //   }
                // },
                disabledDate: (time) => {
                    const date = new Date().getTime();
                    const one = 30 * 24 * 3600 * 1000;
                    const minTime = date - one;
                    // const maxTime = date + one;
                    // return (
                    //   time.getTime() < minTime ||
                    //   // time.getTime() > maxTime ||
                    //   time.getTime() > date
                    // );
                },
            },
        };
    },
    mounted() {
        this.lineChart([], [], 1);
        this.lineChart2([], [], 1);
        this.ranking2(
            { type: "checkPoint", start: this.value, end: this.value2 },
            1
        );
        this.ranking2(
            { type: "person", start: this.value, end: this.value2 },
            2
        );
    },
    methods: {
        reLoad() {
            this.value = this.dayjs().subtract(7, "day").format("YYYY-MM-DD");
            this.value2 = this.dayjs().format("YYYY-MM-DD");
            this.lineChart([], [], 1);
            this.lineChart2([], [], 1);
            this.ranking2(
                { type: "checkPoint", start: this.value, end: this.value2 },
                1
            );
            this.ranking2(
                { type: "person", start: this.value, end: this.value2 },
                2
            );
        },
        timeData() {
            this.ranking2(
                { type: "checkPoint", start: this.value, end: this.value2 },
                1
            );
            this.ranking2(
                { type: "person", start: this.value, end: this.value2 },
                2
            );
            this.ranking({ type: 2, start: this.value, end: this.value2 }, 1);
            this.ranking({ type: 1, start: this.value, end: this.value2 }, 2);
        },
        ranking(data, key) {
            selectPatrolCount(data).then((res) => {
                if (key == 1) {
                    let cname = [];
                    let count = [];
                    cname = res.data.data.map((item) => {
                        return item.mobile_time;
                    });
                    count = res.data.data.map((item) => {
                        return item.count;
                    });
                    this.lineChart2(cname, count, 2);
                } else if (key == 2) {
                    let uname = [];
                    let count = [];
                    uname = res.data.data.map((item) => {
                        return item.user_name;
                    });
                    count = res.data.data.map((item) => {
                        return item.count;
                    });
                    this.lineChart(uname, count, 2);
                }
            });
        },
        ranking2(data, key) {
            missCheckRanking(data).then((res) => {
                if (key == 1) {
                    this.list = res.data.data.map((item) => {
                        return {
                            name: item.checkpoint_name,
                            work: item.count,
                        };
                    });
                } else if (key == 2) {
                    this.list2 = res.data.data.map((item) => {
                        return {
                            name: item.user_name,
                            work: item.count,
                        };
                    });
                }
            });
        },
        lineChart(uname, c, key) {
            var user_name = [];
            var count = [];
            user_name = uname;
            count = c;
            let formData = {
                type: 1,
                start: this.value,
                end: this.value2,
            };
            if (key == 1) {
                selectPatrolCount(formData).then((res) => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        user_name.push(res.data.data[i].user_name);
                        count.push(res.data.data[i].count);
                    }
                });
            }
            setTimeout(() => {
                var dom = document.getElementById("chart-container");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    grid: {
                        top: "3%",
                        left: "3%",
                        right: "4%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    dataZoom: [
                        {
                            type: "inside",
                            // handleSize: 2, // 滑动条的 左右2个滑动条的大小
                            height: 10,
                            bottom: 10,
                            borderColor: "transparent",
                            showDataShadow: true, // 是否显示数据阴影 默认auto
                            showDetail: true, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                        {
                            type: "slider",
                            // handleSize: 2, // 滑动条的 左右2个滑动条的大小
                            height: 20,
                            bottom: 20,
                            borderColor: "transparent",
                            showDataShadow: true, // 是否显示数据阴影 默认auto
                            showDetail: true, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                    ],
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            rotate: 40,
                        },
                        data: user_name,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: count,
                            type: "bar",
                            label: {
                                show: true,
                                position: "top",
                                color: "#acc3f6",
                            },
                            itemStyle: {
                                color: "#acc3f6",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
        lineChart2(mtime, c, key) {
            var mobile_time = [];
            var count = [];
            mobile_time = mtime;
            count = c;
            let formData = {
                type: 2,
                start: this.value,
                end: this.value2,
            };
            if (key == 1) {
                selectPatrolCount(formData).then((res) => {
                    console.log(res);
                    for (let i = 0; i < res.data.data.length; i++) {
                        mobile_time.push(res.data.data[i].mobile_time);
                        count.push(res.data.data[i].count);
                    }
                });
            }
            setTimeout(() => {
                var dom = document.getElementById("chart-container2");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            rotate: 40,
                        },
                        data: mobile_time,
                    },
                    yAxis: {
                        type: "value",
                    },
                    grid: {
                        top: "3%",
                        left: "3%",
                        right: "4%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    dataZoom: [
                        {
                            type: "inside",
                            // handleSize: 2, // 滑动条的 左右2个滑动条的大小
                            height: 10,
                            bottom: 10,
                            borderColor: "transparent",
                            showDataShadow: true, // 是否显示数据阴影 默认auto
                            showDetail: true, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                        {
                            type: "slider",
                            // handleSize: 2, // 滑动条的 左右2个滑动条的大小
                            height: 20,
                            bottom: 20,
                            borderColor: "transparent",
                            showDataShadow: true, // 是否显示数据阴影 默认auto
                            showDetail: true, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                    ],
                    series: [
                        {
                            data: count,
                            type: "bar",
                            label: {
                                show: true,
                                position: "top",
                                color: "#acc3f6",
                            },
                            itemStyle: {
                                color: "#acc3f6",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.chart-container {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 364px;
    overflow: hidden;
    margin: auto;
}
.chose {
    width: 100%;
    height: 65px;
    .top {
        display: flex;
        align-items: center;
        width: 100%;
        height: 58px;
        line-height: 20px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;
        border: 1px solid rgba(224, 230, 236, 1);
        .word {
            margin-left: 20px;
            font-size: 14px;
            font-family: SourceHanSansSC-regular;
        }
        .select {
            margin-left: 10px;
        }
        .button {
            margin-left: 10px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            background-color: rgba(88, 165, 92, 1);
            color: rgba(255, 254, 232, 1);
            font-size: 14px;
            text-align: center;
            font-family: Microsoft Yahei;
            border: 1px solid rgba(187, 187, 187, 1);
            cursor: pointer;
            &:hover {
                background-color: rgba(88, 165, 92, 0.8);
            }
        }
    }
}
.chart {
    position: relative;
    margin: auto;
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    .title {
        position: relative;
        top: 20px;
        left: 20px;
        width: 128px;
        height: 24px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
    .list {
        position: relative;
        top: 40px;
        height: 300px;
        // width: 100%;/
        overflow-y: auto;
    }
}
.title-list {
    line-height: 30px;
    // width: 82%;
    height: 30px;
    padding-left: 40px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.ranking {
    margin-left: 40px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: rgba(240, 46, 46, 1);
    color: rgba(241, 243, 245, 1);
    font-size: 16px;
    text-align: center;
    font-family: Roboto;
}
</style>
